<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>赛事详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/demo.css" />
    <script src="js/ydui.flexible.js"></script>
    <style>
        .cell-left {
            width: 20%
        }
        .btn-block {
            margin: 0;
        }
    </style>
</head>

<body>
    <section class="g-flexview" id="app" v-cloak>
        <sync-loader v-if="loading" :color="color"></sync-loader>
        <div  class="m-tab">
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active"><a href="javascript:;" @click="tabSendH">赛事详情</a></li>
                <li class="tab-nav-item"><a href="javascript:;"  @click="tabsend">消息</a></li>
            </ul>
    <div class="tab-panel">
        <div class="tab-panel-item tab-active" style="height: auto">
        <section class="g-scrollview" v-if="!loading">
            <div class="m-cell demo-small-pitch text_team_details">
                <div class="cell-item">
                    <div class="cell-left">赛事</div>
                    <div class="cell-right text_l" id="event">
                        {{details.matchName}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛类型</div>
                    <div class="cell-right text_l" id="pattern">
                        {{details.matchType}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">报名时间</div>
                    <div class="cell-right text_l" id="applyTime">
                        {{details.applyStartTime}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛时间</div>
                    <div class="cell-right text_l" id="gameTime">
                        {{details.matchStartTime}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">参赛条件</div>
                    <div class="cell-right text_l" id="gamecondition">
                        {{details.applyFee}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">奖励说明</div>
                    <div class="cell-right text_l teamReferral" id="teaminfo" style="max-height:100px">
                        <p v-for="item in matchRewardList">第{{item.ranking}}名:{{item.awardValue*100}}%</p>
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">模式</div>
                    <div class="cell-right text_l" id="gameType">
                        {{details.matchMode}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">参赛队员</div>
                    <div class="cell-right text_l" id="teamMember" style="justify-content: flex-end;">
                        （已报名{{details.applyPeopleNum}}/参赛{{details.matchPeopleNum}}）
                        <a href="javascript:;" v-if="this.userRole == 20 && this.showjudge == 1" class="btn btn-primary apply_btn margin_r5" id="J_Confirm" @click="judgeUserJoin">报名审核</a>
                    </div>
                </div>
                <div class="cell-item" v-if="stimulate">
                    <div class="cell-left">吃鸡用户</div>
                    <div class="cell-right text_l teamReferral" id="stimulate" style="max-height:190px">
                        <p v-for="item in ranking">第{{item.obtainRank}}名:{{item.gameRole}}</p>
                    </div>
                    <p class="complainBtn" @click="complain">我要投诉</p>
                </div>
            </div>
            <div class="m-button">
                <button type="button" id="saveBtn" @click="applyJoin" :style="{background: btnStyle}" class="btn-block btn-primary">{{btnStr}}</button>
            </div>

        </section>
        </div>
        <div class="tab-panel-item" style="height: 100%;padding: 0">
            <div class="message">
                <div class="send"  v-for="item in datalist">
                    <span class="time">{{item.time}}</span>
                    <div class="msg">
                        <p class='minister'>
                           {{item.nickname}}:
                        </p>
                        <p>{{item.content}}</p>
                    </div>
                </div>
                <div class="loadmessage" v-show="showmessage">请稍等，加载中……</div>
            </div>
        </div>
    </div>
        </div>
        <div class="bottom_send" v-if="showS" v-show="this.userRole != '10'">
            <input type="text" class="cell-input" v-model="sendContent" placeholder="请输入内容" autocomplete="off" />
            <button type="button" class="btn-primary send_btn" @click="sendMesssage">发送</button>
        </div>
    </section>
    <script src="js/jquery.min.js"></script>
    <script src="js/ydui.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/vue-spinner-master/dist/vue-spinner.js"></script>
    <script src="js/layer/layer.js"></script>

</body>
<script>
    /* 获取头部信息 */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return r[2];
        }
    };
    var SyncLoader = VueSpinner.SyncLoader
    var app = new Vue({
        el: '#app',
        components: {
            'SyncLoader': SyncLoader
        },
        data: {
            id: GetQueryString('id'),
            token: GetQueryString('token'),
            userRole: GetQueryString('userRole'),
            appType:GetQueryString('appType'),
            teamId:GetQueryString('teamId'),
            teamName:GetQueryString('teamName'),
            showjudge:'0',
            loading: true,
            color: '#FF6C00',
            details: '',
            matchRewardList:[],
            canClick:false,
            btnStyle:'#ccc',
            btnStr:'',
            stimulate:false,
            ranking:[],
            sendContent:'',
            datalist:[],
            showS:false,
            showmessage:true
        },
        methods: {
            tabSendH:function () {
                $('.m-tab').tab({
                    nav: '.tab-nav-item',
                    panel: '.tab-panel-item',
                    activeClass: 'tab-active'
                });
                $('.m-tab').find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                });
                this.showS=false;
            },
            tabsend:function () {
                $('.m-tab').tab({
                    nav: '.tab-nav-item',
                    panel: '.tab-panel-item',
                    activeClass: 'tab-active'
                });
                $('.m-tab').find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                });
                this.showS=true;
                this.messageDetails();
            },
            messageDetails:function () {
                this.$http({
                    method: "post",
                    url: "/appMatchMsg/getMatchMsg",
                    data: {
                        token: this.token,
                        matchId:this.id,
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    console.log(res);
                    this.showmessage=false;
                    // layer.msg(res.data.message);
                    this.datalist=res.data.data;
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('获取详情失败');
                    this.loading = false;
                })
            },
            sendMesssage:function(){
                if(this.sendContent =='' || this.sendContent ==null){
                    layer.msg('请输入消息内容');
                    return;
                }
                this.$http({
                    method: "post",
                    url: "/appMatchMsg/sendMatchMsg",
                    data: {
                        token: this.token,
                        matchId:this.id,
                        sendContent:this.sendContent
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    console.log(res);
                    layer.msg(res.data.message);
                    this.messageDetails();
                    this.sendContent='';
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('获取详情失败');
                    this.loading = false;
                })
            },
            get: function() {
                this.$http({
                    method: "post",
                    url: "/appMatch/matchDetail",
                    data: {
                        token: this.token,
                        id: this.id,
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    this.loading = false;
                    console.log(res);
                    if(res.data.code =='0') {
                        // layer.msg(res.data.message);
                        this.details = res.data.data;
                        this.matchRewardList = res.data.data.matchRewardList;
                        var state = this.details.matchState;
                        if (state == '10') {
                            this.btnStr = '未开始';
                        } else if (state == '20') {
                            this.btnStr = '未开始';
                        } else if (state == '30') {
                            this.showjudge = '1';
                            this.btnStr = '报名中 ';
                        } else if (state == '40') {
                            this.showjudge = '1';
                            this.btnStr = '准备中 ';
                        } else if (state == '50') {
                            this.btnStr = '比赛中';
                        } else if (state == '60') {
                            this.btnStr = '战绩确认中';
                        } else if (state == '70') {
                            this.btnStr = '已结束';
                            this.stimulate = true;
                            /*调取名次接口*/
                            this.$http({
                                method: "post",
                                url: "/appPubgMatchSettlement/findFinishMatchSettlement",
                                data: {
                                    token: this.token,
                                    matchId:this.id
                                },
                                emulateJSON: true
                            }).then(function(res) { // 访问成功后执行
                                    console.log(res.data);
                                    this.ranking=res.data.data;
                            }, function(error) { // 访问失败执行
                                layer.msg('接口返回失败');
                            })
                        } else if (state == '80') {
                            this.btnStr = '已取消';
                        }
                        if (this.userRole == '10' && state == '30') {
                            var userState = this.details.userState;
                            if(userState == undefined || userState == ''){
                                this.btnStr = '我要报名';
                                //能点击
                                this.btnStyle = '#FF6C00';
                                this.canClick = true;
                            }else if(userState == '10'){
                                this.btnStr = '待审核';
                            }else if(userState == '20'){
                                this.btnStr = '已审核';
                            }else{
                                this.btnStr = '我要报名';
                                //能点击
                                this.btnStyle = '#FF6C00';
                                this.canClick = true;
                            }
                        }
                    }
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('接口返回失败');
                    this.loading = false;
                })
            },
            applyJoin: function() {
                if(!this.canClick){
                    return;
                }
                var that = this;
                var bool = false;  //加个锁
                layer.confirm('确定申请《'+decodeURI(that.teamName)+'》战队的赛事么?', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    if(!bool){
                        bool = true;//锁住
                    that.$http({
                        method: "post",
                        url: "/appPubgUser/applyJoinMatch",
                        data: {
                            token: that.token,
                            teamId:that.teamId,
                            matchId:that.id
                        },
                        emulateJSON: true
                    }).then(function(res) { // 访问成功后执行
                        if(res.data.code =='0') {
                            if(this.appType == 'ios'){
                                window.webkit.messageHandlers.reloadPage.postMessage('');
                            }else{
                                window.android.reloadPage('');
                            }
                        }else{
                            console.log(res.data);
                            if(res.data.message.indexOf('实名') != '-1'){
                                layer.confirm('此赛事需要实名后才能参加', {
                                    btn: ['去实名','取消'] //按钮
                                }, function(){
                                    if(this.appType == 'ios'){
                                        window.webkit.messageHandlers.realNamepage.postMessage('');
                                    }else{
                                        window.android.realNamepage('');
                                    }
                                });
                            }
                        }
                    }, function(error) { // 访问失败执行
                        $(".layui-layer").show();
                        layer.msg("执行失败");
                    })
                    }
                });
            },
            /*我要投诉*/
            complain:function() {
                if (this.appType == 'ios') {
                    //跳转我要投诉
                    window.webkit.messageHandlers.complain.postMessage('');
                } else if(this.appType == 'android') {
                    window.android.complain('');
                }else{
                    layer.msg("请在手机端操作")
                }
            },
            judgeUserJoin:function(){
                if(this.appType == 'ios'){
                    window.webkit.messageHandlers.goJoinMatch.postMessage(this.id);
                }else if(this.appType == 'android'){
                    window.android.goJoinMatch(this.id);
                }else{
                    layer.msg("请在手机端操作")
                }
            },
        },
        mounted: function() {
            this.$nextTick(function() {
                var that=this;
                this.get();
                setInterval(function(){
                    that.messageDetails();
                },5000);
            })
        }
    })
</script>

</html>